<template>
  <div class="container">
    <div class="drawboard" ref="drawboard">
      <div class="center">
        <div class="topBarContainers">
          <div class="bottomBar">
            <el-button
              type="primary"
              class="bottomBar_btn"
              plain
              size="mini"
              @click="changetopbarStatus"
              >工具栏<i
                :class="
                  topbarStatus ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                "
              ></i
            ></el-button>
            <slot name="bottomBar"></slot>
          </div>
          <div class="topBarContainers_box">
            <div class="topBar" v-show="topbarStatus">
              <topBar
                ref="topBar"
                :currentStatus="currentStatus"
                @topBarEvent="topBarEvent"
                @configChange="configChange"
                @getCurrentColor="getCurrentColor"
                @contrastChange="contrastChange"
                @brightnessChange="brightnessChange"
                :currentTool="currentTool"
                @setMarkId="setMarkId"
                @emitPhotoMarkMainMarkOptions="emitPhotoMarkMainMarkOptions"
              ></topBar>
            </div>
            <div class="tools" v-if="notSharePageEnter && topbarStatus">
              <tool
                @toolSelected="toolSelected"
                :currentTool="currentTool"
                :type="renderDataEleEventName"
                ref="toolref"
              >
              </tool>
            </div>
          </div>
        </div>

        <div class="wrapper">
          <div
            class="view"
            ref="view"
            v-loading="loading"
            element-loading-text="加载中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 1)"
          >
            <canvas id="image" ref="image" class="canvas"
              >The browser does not support canvas</canvas
            >
            <canvas
              id="canvas"
              ref="canvas"
              class="canvas"
              @mousedown="canvasMousedown"
              @touchstart="canvasMousedown"
              >The browser does not support canvas</canvas
            >
          </div>
        </div>
        <!-- <div class="bottomBar">
          <slot name="bottomBar"></slot>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  generateImage,
  windowToCanvas,
  canvasToImage,
  imageToCanvas,
  formatPointRange,
  fullScreen,
  exitScreen,
  debounce,
} from "./utils/index";
import { listMarkIntall } from "@/api/system/tagManage";
import { status, generateGrid, drawNavigationLine } from "./draw/index";
import figureFactory from "./draw/figureFactory.js";
import topBar from "./components/topBar";
import tool from "./components/tool";
import imageEvent from "./draw/imageEvent.js";
export default {
  name: "drawboard",
  components: {
    topBar,
    tool,
  },
  props: {
    url: {
      type: String,
      required: true,
    },
    userOptions: {
      type: Object,
      default: () => {},
    },
    labelDataOrigin: {
      type: Array,
      default: () => [],
    },
    loadingData: {
      type: Boolean,
      default: false,
    },
    currentEventName: {
      type: String,
      required: true,
    },
    notSharePageEnter: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      drawer: false,
      topbarStatus: false, //tobar 显示与隐藏
      imagePosX: 0,
      imagePosY: 0,
      imageXOffset: 0,
      imageYOffset: 0,
      imageWidth: 0,
      imageHeight: 0,
      imageScale: 0,
      scale: 1,
      degree: 3600,
      viewHeight: 0,
      viewWidth: 0,
      canvas: null,
      image: null,
      drawboard: null,
      view: null,
      mouseStartPoint: null,
      mouseEndPoint: null,
      lastMouseEndPoint: null,
      currentPoint: null,
      currentTool: "",
      graphics: [],
      resultData: [],
      activeGraphic: null,
      activeIndex: -1,
      pointIndex: -1,
      options: {},
      currentStatus: status.DEFAULT, // DRAWING/MOVING/UPDATING
      observer: null,
      isFullScreen: false,
      loading: false,
      imagePixelData: [],
      renderDataEleEventName: "AI",
      colorOptions: [],
      sMarkId: "",
      currentColor: "",
      distance: null, //初始距离
    };
  },
  computed: {
    convertParams() {
      return {
        imagePosX: this.imagePosX,
        imagePosY: this.imagePosY,
        viewWidth: this.viewWidth,
        viewHeight: this.viewHeight,
        imageXOffset: this.imageXOffset,
        imageYOffset: this.imageYOffset,
        imageScale: this.imageScale,
        scale: this.scale,
        degree: this.degree,
      };
    },
  },
  watch: {
    graphics: {
      handler() {
        debounce(this.sendResultData, 100)();
      },
      deep: true,
      immediate: true,
    },
    url: {
      handler() {
        if (this.url) {
          this.loading = true;
          this.loadImage(this.url);
        }
      },
      immediate: true,
    },
    activeIndex: {
      handler(val) {
        if (this.currentStatus === "UPDATING") {
          this.$emit("activeIndexChange", val);
        }
      },
      immediate: true,
    },
    userOptions: {
      handler() {
        this.options = Object.assign(
          this.options,
          JSON.parse(JSON.stringify(this.userOptions))
        );
      },
      deep: true,
    },
    labelDataOrigin: {
      handler(newData) {
        // console.log("labelDataOrigin", newData);
        this.initRenderData(newData);
        // if (newData.length > 0) {
        //   this.initRenderData(newData)
        // }
      },
      immediate: true,
      deep: true,
    },
    loadingData: {
      handler() {
        this.loading = this.loadingData;
      },
      immediate: true,
    },
    currentEventName: {
      handler() {
        this.renderDataEleEventName = this.currentEventName;
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.initSize();
    this.observerView();
    this.canvas.addEventListener(
      "mousemove",
      this.drawNavigationLineEvent,
      false
    );
    // 手势事件
    this.canvas.addEventListener(
      "touchmove",
      this.drawNavigationLineEvent,
      false
    );

    this.listenScroll();
    this.addRightMouseEvent();
    this.getList();
  },
  beforeDestroy() {
    this.canvas.removeEventListener("mousemove", this.canvasMousemove, false);
    this.canvas.removeEventListener("mouseup", this.canvasMouseup, false);
    document.removeEventListener("keydown", this.keydownEvent, false);

    // 手势事件

    this.canvas.addEventListener("touchmove", this.canvasMousemove, false);
    this.canvas.addEventListener("touchend", this.canvasMouseup, false);

    this.observer.disconnect();
  },
  methods: {
    changeMarkType() {
      // if (
      //   this.renderDataEleEventName != "artificial" &&
      //   this.currentStatus === status.DRAWING
      // ) {
      //   //不是人工
      //   this.currentStatus = status.DEFAULT;
      // }
      if (this.$refs.toolref && this.$refs.toolref.markType) {
        this.$refs.toolref.markType = this.renderDataEleEventName;
        this.$refs.toolref.changeMarkType();
      }
    },
    changetopbarStatus() {
      this.topbarStatus = !this.topbarStatus;
    },
    getCurrentColor(value) {
      this.currentColor = value;
      this.options.PATH_STROKESTYLE = value;
      this.options.POINT_STROKESTYLE = value;
    },

    listenScroll() {
      const w = this;
      (document.onkeydown = function (e) {
        if (e.keyCode === 17) w.ctrlDown = true;
      }),
        (document.onkeyup = function (e) {
          if (e.keyCode === 17) w.ctrlDown = false;
        }),
        document.getElementsByClassName("view")[0].addEventListener(
          "mousewheel",
          (e) => {
            e.preventDefault();
            // if (w.ctrlDown) { }
            if (e.wheelDeltaY > 0) {
              // 放大
              this.topBarEvent("zoomIn");
              this.$refs.topBar.changeTopBarBtnBgcolor("zoomIn");
            } else {
              // 缩小
              this.topBarEvent("zoomOut");
              this.$refs.topBar.changeTopBarBtnBgcolor("zoomOut");
            }
          },
          false
        );
    },
    addRightMouseEvent() {
      let view = document.getElementsByClassName("view")[0];
      view.addEventListener(
        "mousedown",
        (e) => {
          if (e.button === 2) {
            this.currentStatus = status.MOVING;
            this.$refs.topBar.changeTopBarBtnBgcolor("move");
          }
        },
        false
      );
      view.addEventListener(
        "touchmove",
        (e) => {
          if (
            this.currentStatus == status.MOVING ||
            this.currentStatus == null ||
            this.currentStatus == undefined
          ) {
            this.currentStatus = status.MOVING;
            this.$refs.topBar.changeTopBarBtnBgcolor("move");
          }
        },
        false
      );
      // view.addEventListener(
      //   'mouseup',
      //   e => {
      //     if (e.button === 2) {
      //       this.currentStatus = status.DRAWING;
      //     }
      //   },
      //   false
      // )
      // Prohibit the right mouse button menu display
      view.oncontextmenu = function () {
        return false;
      };
    },
    initSize() {
      this.canvas = this.$refs.canvas;
      this.image = this.$refs.image;

      // let ratio = window.devicePixelRatio || 1;
      // console.log('ratio---', window.devicePixelRatio)
      this.canvasCtx = this.canvas.getContext("2d");
      this.imageCtx = this.image.getContext("2d");
      this.drawboard = this.$refs.drawboard;
      this.view = this.$refs.view;
      this.viewHeight = this.view.offsetHeight;
      this.viewWidth = this.view.offsetWidth;
      this.image.setAttribute("height", this.viewHeight);
      this.image.setAttribute("width", this.viewWidth);
      this.canvas.setAttribute("height", this.viewHeight);
      this.canvas.setAttribute("width", this.viewWidth);

      if (this.url) {
        this.loadImage(this.url);
      }
      if (this.graphics.length > 0) {
        if (this.canvasCtx) {
          // this.drawBG();
          // this.drawGraphics();
          // this.readyForNewEvent("draw");
        }
      }
    },
    observerView() {
      this.observer = new ResizeObserver(this.initSize);
      this.observer.observe(this.view);
    },
    sendResultData() {
      this.resultData = [];
      this.graphics.forEach((figure) => {
        let tmpFigure = {};
        tmpFigure.type = figure.type;
        tmpFigure.points = [];
        tmpFigure.markId = figure.markId;
        // console.log("figure.sMarkId", figure.sMarkId);
        tmpFigure.sMarkId = figure.sMarkId;
        tmpFigure.nickName = figure.nickName;
        tmpFigure.createTime = figure.createTime;
        for (let i = 0; i < figure.points.length; i++) {
          let tempPoint = canvasToImage(
            figure.points[i].x,
            figure.points[i].y,
            this.imagePosX,
            this.imagePosY,
            this.viewWidth,
            this.viewHeight,
            this.imageXOffset,
            this.imageYOffset,
            this.imageScale,
            this.scale,
            this.degree
          );
          tmpFigure.points[i] = {
            x: Math.round(tempPoint.x),
            y: Math.round(tempPoint.y),
          };
        }
        this.resultData.push(tmpFigure);
      });
      this.$emit("updateData", this.resultData);
    },
    getImageInfo(x, y, width, height, scale) {
      this.imagePosX = Math.round(x);
      this.imagePosY = Math.round(y);
      this.imageWidth = width;
      this.imageHeight = height;
      this.imageScale = scale;
      this.loading = false;
      this.imagePixelData = this.imageCtx.getImageData(
        this.imagePosX,
        this.imagePosY,
        this.imageWidth * this.imageScale,
        this.imageHeight * this.imageScale
      );
      if (this.labelDataOrigin && this.labelDataOrigin.length > 0) {
        this.initRenderData(this.labelDataOrigin);
      }
      // this.readyForNewEvent("draw")
    },
    loadImage(url) {
      if (this.image) {
        generateImage(this.image, this.getImageInfo, url);
      } else {
        this.$nextTick(() => generateImage(this.image, this.getImageInfo, url));
      }
    },
    initRenderData(data) {
      this.graphics = [];
      let initGraphics = data;
      // console.log("initGraphics", initGraphics);
      if (initGraphics != null) {
        initGraphics.forEach((figure, index) => {
          let type = figure.type;
          //后期设置多的话还是要用这段代码 options
          // let tmpfigure = figureFactory(
          //   type,
          //   figure.points[0],
          //   figure.options || {},
          //   index + 1
          // );
          //目前就一个画笔颜色先写一个
          let tmpfigure = figureFactory(
            type,
            figure.points[0],
            { path_strokeStyle: this.getCurrentcolor(figure.sMarkId) },
            index + 1
          );
          if (figure.markId) {
            tmpfigure.markId = figure.markId;
            tmpfigure.sMarkId = figure.sMarkId;
            tmpfigure.nickName = figure.nickName;
            tmpfigure.createTime = figure.createTime;
          }
          // console.log("tmpfigure.options.path_strokeStyle", tmpfigure.options);
          tmpfigure.points = [];
          figure.points.forEach((point, index) => {
            tmpfigure.points[index] = imageToCanvas(
              point.x,
              point.y,
              this.imagePosX,
              this.imagePosY,
              this.viewWidth,
              this.viewHeight,
              this.imageXOffset,
              this.imageYOffset,
              this.imageScale,
              this.scale,
              this.degree
            );
          });
          this.graphics.push(tmpfigure);
        });
      }
      this.drawBG();
      this.drawGraphics();
    },
    getList() {
      listMarkIntall({ pageNum: 1, pageSize: 9999 }).then((response) => {
        this.colorOptions = response.rows;
      });
    },
    setMarkId(sMarkId) {
      this.sMarkId = sMarkId;
      // console.log("this.sMarkId", this.sMarkId);
    },
    emitPhotoMarkMainMarkOptions() {
      this.getList();
      this.$emit("emitRenderDateEleMarkOptions");
    },
    getCurrentcolor(sMarkId) {
      let color = "";
      this.colorOptions.forEach((item) => {
        if (item.id == sMarkId) {
          color = item.colour;
        }
      });
      return color;
    },
    topBarEvent(eventName) {
      this.currentTool = eventName;
      // this.currentStatus = status.DEFAULT;
      switch (eventName) {
        case "zoomIn":
          this.scale = imageEvent.zoomIn(this.graphics, this.convertParams);
          this.drawBG();
          this.drawGraphics();
          this.updateImage();
          this.canvas.style.cursor = "default";
          break;
        case "zoomOut":
          if (this.scale <= 1) {
            this.scale = 1;
            break;
          }
          this.scale = imageEvent.zoomOut(this.graphics, this.convertParams);
          this.drawBG();
          this.drawGraphics();
          this.updateImage();
          this.canvas.style.cursor = "default";
          break;
        case "rotateRight":
          this.degree = imageEvent.rotateRight(
            this.graphics,
            this.convertParams
          );
          this.drawBG();
          this.drawGraphics();
          this.updateImage();
          this.canvas.style.cursor = "default";
          break;
        case "rotateLeft":
          this.degree = imageEvent.rotateLeft(
            this.graphics,
            this.convertParams
          );
          this.drawBG();
          this.drawGraphics();
          this.updateImage();
          this.canvas.style.cursor = "default";
          break;
        case "move":
          this.readyForNewEvent("move");
          break;
        case "clearAll":
          this.clearAll();
          this.canvas.style.cursor = "default";
          break;
        case "fullScreen":
          if (this.isFullScreen) {
            exitScreen(this.drawboard);
            this.isFullScreen = false;
            this.canvas.style.cursor = "default";
          } else {
            fullScreen(this.drawboard);
            this.isFullScreen = true;
            this.canvas.style.cursor = "default";
          }
          break;
        default:
          break;
      }
    },
    toolSelected(toolName) {
      this.currentTool = toolName;
      if (
        this.renderDataEleEventName == "artificial" ||
        this.renderDataEleEventName == "scientific"
      ) {
        this.readyForNewEvent("draw");
      }
    },
    configChange(config) {
      this.options = JSON.parse(JSON.stringify(config));
      if (this.canvasCtx) {
        this.drawBG();
        this.drawGraphics();
        this.readyForNewEvent("draw");
      }
    },
    clearAll() {
      this.graphics = [];
      this.$emit("clearAllCb");
      this.drawBG();
      // this.readyForNewEvent("draw");
    },

    // Initialize the canvas
    drawBG() {
      //console.log(this.canvasCtx)
      if (this.canvasCtx) {
        this.canvasCtx.clearRect(0, 0, this.viewWidth, this.viewHeight);
      }
      if (this.options.grid) {
        generateGrid(this.canvas, "lightGray", 10, 10);
      }
    },
    // draing
    drawGraphics() {
      this.graphics.forEach((graphic, index) => {
        // format point range when the point exceeds the image boundary
        graphic.points.forEach((point, index) => {
          graphic.points[index] = formatPointRange(
            point,
            this.imagePosX,
            this.imagePosY,
            this.viewWidth,
            this.viewHeight,
            this.imageXOffset,
            this.imageYOffset,
            this.imageScale,
            this.scale,
            this.degree
          );
        });
        // computedCenter
        graphic.computedCenter();
        graphic.draw(this.canvasCtx); //每次重新画图渲染的方法
        if (
          this.activeIndex === index &&
          this.currentStatus === status.UPDATING
        ) {
          graphic.drawPoints(this.canvasCtx);
        }
        if (this.options.guid) {
          // drawNavigationLine(this.canvas, this.currentPoint.x, this.currentPoint.y);
        }
      });
    },
    drawNavigationLineEvent(e) {
      this.drawBG();
      this.drawGraphics();
      if (this.options.guid) {
        this.currentPoint = windowToCanvas(this.canvas, e.clientX, e.clientY);
        drawNavigationLine(
          this.canvas,
          this.currentPoint.x,
          this.currentPoint.y
        );
      }
    },
    canvasMousedown(e) {
      console.log(this.currentStatus);
      // Do not process other logic when right click
      if (e.button === 2) return;
      if (this.currentStatus === status.DRAWING) {
        if (this.sMarkId === "") {
          this.$message.warning("请选择病种");
          return;
        }
        if (
          !["route", "polyline", "rectangle", "polygon", "point",'circle'].includes(
            this.currentTool
          )
        ) {
          this.$message.warning("请点击标注画笔类型");
          return;
        }
      }
      if (this.currentStatus === status.DEFAULT) return;

      if (e.type == "touchstart" && e.touches && e.touches.length == 2) {
        //双手指放大 缩小
        this.distance = Math.sqrt(
          Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2) +
            Math.pow(e.touches[0].clientY - e.touches[1].clientY, 2)
        );
      } else {
        if (this.currentStatus === status.DEFAULT) return;
      }

      this.mouseStartPoint = windowToCanvas(this.canvas, e.clientX, e.clientY);
      if (e.type == "mousedown") {
        this.mouseStartPoint = windowToCanvas(
          this.canvas,
          e.clientX,
          e.clientY
        );
      } else if (e.type == "touchstart") {
        if (e.touches && e.touches.length == 2) {
          //双手指放大 缩小
          // 获取双指中心位置和双指距离
          // centerX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
          // centerY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
          this.distance = Math.sqrt(
            Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2) +
              Math.pow(e.touches[0].clientY - e.touches[1].clientY, 2)
          );
        } else {
          //滑动
          this.mouseStartPoint = windowToCanvas(
            this.canvas,
            e.touches[0].clientX,
            e.touches[0].clientY
          );
        }
      }

      this.lastMouseEndPoint = this.mouseStartPoint;
      this.canvas.addEventListener("mousemove", this.canvasMousemove, false);

      if (
        ["route", "rectangle", "point","circle"].includes(this.currentTool) ||
        this.currentStatus === status.MOVING
      ) {
        this.canvas.addEventListener("mouseup", this.canvasMouseup, false);
      } else {
        this.canvas.addEventListener("dbclick", this.canvasMouseup, false);
      }
      document.addEventListener("keydown", this.keydownEvent, false);

      // 手势事件

      this.canvas.addEventListener("touchmove", this.canvasMousemove, false);
      this.canvas.addEventListener("touchend", this.canvasMouseup, false);

      if (this.currentStatus === status.DRAWING) {
        if (this.activeGraphic == null) {
          for (let i = 0; i < this.graphics.length; i++) {
            // updating
            if (
              this.graphics[i].isInPath(this.canvasCtx, this.mouseStartPoint) >
              -1
            ) {
              this.canvas.style.cursor = "crosshair";
              this.activeGraphic = this.graphics[i];
              this.activeIndex = i;
              this.currentStatus = status.UPDATING;
              break;
            }
          }
          if (this.currentStatus === status.DRAWING) {
            this.activeGraphic = figureFactory(
              this.currentTool,
              this.mouseStartPoint,
              this.options,
              this.graphics.length + 1 //这个是画圈时的序号
            );
            this.graphics.push(this.activeGraphic);
            this.activeIndex = this.graphics.length - 1;
            this.canvas.style.cursor = "crosshair";
          }
        } else {
          if (["polygon", "polyline", "route"].includes(this.currentTool)) {
            if (
              this.activeGraphic.triggerEndCondition(
                this.canvasCtx,
                this.mouseStartPoint
              )
            ) {
              // this.readyForNewEvent("draw");
              // this.drawBG();
              // this.drawGraphics();
              this.canvasMouseup();
            } else {
              this.activeGraphic.points.push(this.mouseStartPoint);
            }
          }
        }
      } else if (this.currentStatus === status.UPDATING) {
        for (let i = 0; i < this.graphics.length; i++) {
          // 选中控制点后拖拽修改图形
          if (
            this.graphics[i].isInPath(this.canvasCtx, this.mouseStartPoint) > -1
          ) {
            this.canvas.style.cursor = "crosshair";
            this.activeGraphic = this.graphics[i];
            this.activeIndex = i;
            this.currentStatus = status.UPDATING;
            break;
          }
        }
        this.pointIndex = this.activeGraphic.isInPath(
          this.canvasCtx,
          this.mouseStartPoint
        );
      }
    },
    tochScroll(scale) {
      this.currentStatus = status.DEFAULT;
      if (scale > 1) {
        // 放大
        this.topBarEvent("zoomIn");
        this.$refs.topBar.changeTopBarBtnBgcolor("zoomIn");
      } else {
        // 缩小
        //this.topBarEvent("zoomOut")
        this.scale = this.scale - 0.2;
        if (this.scale <= 1) {
          this.scale = 1;
        }

        this.drawBG();
        this.drawGraphics();
        this.updateImage();
        this.canvas.style.cursor = "default";
        this.$refs.topBar.changeTopBarBtnBgcolor("zoomOut");
      }
    },
    canvasMousemove(e) {
      this.mouseEndPoint = windowToCanvas(this.canvas, e.clientX, e.clientY);
      if (e.type == "mousemove") {
        this.mouseEndPoint = windowToCanvas(this.canvas, e.clientX, e.clientY);
      } else if (e.type == "touchmove") {
        if (e.touches && e.touches.length == 2) {
          //双手指放大 缩小
          // 获取双指中心位置和双指距离
          // centerX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
          // centerY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
          let newDistance = Math.sqrt(
            Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2) +
              Math.pow(e.touches[0].clientY - e.touches[1].clientY, 2)
          );
          let zoomscale = newDistance / this.distance;
          this.tochScroll(zoomscale);
          return false;
        } else {
          //滑动
          this.mouseEndPoint = windowToCanvas(
            this.canvas,
            e.touches[0].clientX,
            e.touches[0].clientY
          );
        }
      }
      if (this.currentStatus === status.MOVING) {
        let translateX =
          this.imageXOffset + (this.mouseEndPoint.x - this.mouseStartPoint.x);
        let translateY =
          this.imageYOffset + (this.mouseEndPoint.y - this.mouseStartPoint.y);
        let tmpConvertParams = JSON.parse(JSON.stringify(this.convertParams));
        let tmpGraphics = imageEvent.formatPointsInImageWhenMove(
          this.graphics,
          tmpConvertParams
        );
        this.image.style.transform = `scale(${this.scale},${this.scale}) translate(${translateX}px,${translateY}px) rotateZ(${this.degree}deg)`;
        tmpConvertParams.imageXOffset = translateX;
        tmpConvertParams.imageYOffset = translateY;
        imageEvent.formatPointsInCanvasWhenMove(tmpGraphics, tmpConvertParams);
        this.drawBG();
        imageEvent.drawTmpGraphics(tmpGraphics, this.canvasCtx);
      } else if (this.currentStatus === status.UPDATING && this.activeGraphic) {
        this.drawBG();
        this.drawGraphics();
        if (this.pointIndex > -1) {
          if (this.pointIndex === 999) {
            this.activeGraphic.move(this.lastMouseEndPoint, this.mouseEndPoint);
            this.lastMouseEndPoint = this.mouseEndPoint;
          } else {
            this.activeGraphic.update(this.pointIndex, this.mouseEndPoint);
          }
        }
      } else if (this.currentStatus === status.DRAWING && this.activeGraphic) {
        this.drawBG();
        this.drawGraphics();
        if (["polygon", "polyline"].includes(this.currentTool)) {
          let pointIndex = this.activeGraphic.isInPath(
            this.canvasCtx,
            this.mouseEndPoint
          );
          if (pointIndex === 0) {
            this.focusCicle(
              this.canvasCtx,
              this.activeGraphic.points[0],
              this.options.point_lineWidth,
              this.options.point_strokeStyle,
              this.options.point_radis * 2
            );
          }
          this.previewGraphic(
            this.canvasCtx,
            this.activeGraphic,
            this.mouseEndPoint
          );
        } else if (["rectangle"].includes(this.currentTool)) {
          this.activeGraphic.initFigure(
            this.mouseStartPoint,
            this.mouseEndPoint
          );
        }else if (["circle"].includes(this.currentTool)) {
          this.activeGraphic.initFigure0(
            this.mouseStartPoint,
            this.mouseEndPoint
          );
        
      
        }  else if (["route"].includes(this.currentTool)) {
          this.drawRoute(
            this.canvasCtx,
            this.activeGraphic,
            this.mouseEndPoint
          );
        }
      }
    },
    canvasMouseup(e) {
      if (this.currentStatus === status.MOVING) {
        imageEvent.formatPointsInImage(this.graphics, this.convertParams);
        this.imageXOffset += this.mouseEndPoint.x - this.mouseStartPoint.x;
        this.imageYOffset += this.mouseEndPoint.y - this.mouseStartPoint.y;
        imageEvent.formatPointsInCanvas(this.graphics, this.convertParams);
        this.drawBG();
        this.drawGraphics();
        this.updateImage();
        this.readyForNewEvent("move");
      } else if (this.currentStatus === status.UPDATING) {
        if (this.activeGraphic) {
          this.drawBG();
          this.drawGraphics();
        }
        this.readyForNewEvent("update");
      } else if (this.currentStatus === status.DRAWING) {
        // if (this.activeGraphic) {
        //   this.drawBG();
        //   this.drawGraphics();
        // }
        if (
          ["route", "rectangle", "point", "polyline", "polygon","circle"].includes(
            this.currentTool
          )
        ) {
       //   console.log("this.options", this.options);
          let tmpFigure = {};
         // console.log("this.sMarkId", this.sMarkId);
          tmpFigure.sMarkId = this.sMarkId;
          tmpFigure.type = this.activeGraphic.type;
          tmpFigure.points = [];
          tmpFigure.options = {
            path_strokeStyle: this.options.path_strokeStyle,
            point_strokeStyle: this.options.point_strokeStyle,
          };
          for (let i = 0; i < this.activeGraphic.points.length; i++) {
            let tempPoint = canvasToImage(
              this.activeGraphic.points[i].x,
              this.activeGraphic.points[i].y,
              this.imagePosX,
              this.imagePosY,
              this.viewWidth,
              this.viewHeight,
              this.imageXOffset,
              this.imageYOffset,
              this.imageScale,
              this.scale,
              this.degree
            );
            tmpFigure.points[i] = {
              x: Math.round(tempPoint.x),
              y: Math.round(tempPoint.y),
            };
          }
          // console.log("tmpFigure", tmpFigure);
          this.$emit("annotation-drawing-end", tmpFigure);
          this.readyForNewEvent("draw");
          this.drawBG();
          this.drawGraphics();
        }
      }
    },
    readyForNewEvent(evevt = "draw") {
      if (evevt === "draw") {
        this.activeIndex = -1;
        this.activeGraphic = null;
        this.currentStatus = status.DRAWING;
        this.canvas.style.cursor = "crosshair";
      } else if (evevt === "move") {
        this.activeIndex = -1;
        this.activeGraphic = null;
        this.currentStatus = status.MOVING;
        this.canvas.style.cursor = "move";
      } else {
        this.canvas.style.cursor = "default";
      }
      this.canvas.removeEventListener("mousemove", this.canvasMousemove, false);
      this.canvas.removeEventListener("mouseup", this.canvasMouseup, false);
      // 手势事件
      this.canvas.addEventListener("touchmove", this.canvasMousemove, false);
      this.canvas.addEventListener("touchend", this.canvasMouseup, false);
    },
    focusCicle(ctx, point, lineWidth = 2, color = "#999", radis = 10) {
      ctx.save();
      ctx.lineWidth = lineWidth;
      ctx.strokeStyle = color;
      ctx.beginPath();
      ctx.arc(point.x, point.y, radis, 0, Math.PI * 2, false);
      ctx.stroke();
      ctx.restore();
      this.activeGraphic.points.push(point);
    },
    drawRoute(ctx, graphic, point, fillStyle = "hsla(0,100%,50%,.3)") {
      // ctx.save();
      // ctx.beginPath();
      // graphic.points.forEach((p, i) => {
      //   ctx[i != 0 ? "lineTo" : "moveTo"](p.x, p.y);
      // });
      // ctx.lineTo(point.x, point.y);
      // ctx.strokeStyle = graphic.path_strokeStyle;
      // ctx.lineWidth = graphic.path_lineWidth;
      // ctx.stroke();
      // ctx.fillStyle = fillStyle;
      // ctx.restore();
      console.log("drawRoute", this.activeGraphic);
      this.activeGraphic.points.push(this.mouseEndPoint);
    },
 
    previewGraphic(ctx, graphic, point, fillStyle = "hsla(0,100%,50%,.3)") {
      ctx.save();
      ctx.beginPath();
      graphic.points.forEach((p, i) => {
        ctx[i != 0 ? "lineTo" : "moveTo"](p.x, p.y);
      });
      ctx.lineTo(point.x, point.y);
      ctx.strokeStyle = graphic.path_strokeStyle;
      ctx.lineWidth = graphic.path_lineWidth;
      ctx.stroke();
      ctx.fillStyle = fillStyle;
      if (graphic.type === "polygon") ctx.fill();
      ctx.restore();
    },
    keydownEvent(e) {
      if (e.keyCode == 13) {
        //折线和多边形按完enter键后去保存提交后台点位信息
        if (["polygon", "polyline"].includes(this.currentTool)) {
          let tmpFigure = {};
          tmpFigure.type = this.activeGraphic.type;
          tmpFigure.points = [];
          for (let i = 0; i < this.activeGraphic.points.length; i++) {
            let tempPoint = canvasToImage(
              this.activeGraphic.points[i].x,
              this.activeGraphic.points[i].y,
              this.imagePosX,
              this.imagePosY,
              this.viewWidth,
              this.viewHeight,
              this.imageXOffset,
              this.imageYOffset,
              this.imageScale,
              this.scale,
              this.degree
            );
            tmpFigure.points[i] = {
              x: Math.round(tempPoint.x),
              y: Math.round(tempPoint.y),
            };
          }
          this.$emit("annotation-drawing-end", tmpFigure);
        }
        this.readyForNewEvent("draw");
        this.drawBG();
        this.drawGraphics();
      } else if (e.keyCode == 46) {
        if (this.activeIndex > -1) {
          this.graphics.splice(this.activeIndex, 1);
          this.$emit("deleteFigureCb", this.activeIndex);
          this.readyForNewEvent("draw");
          this.drawBG();
          this.drawGraphics();
        }
      }
    },
    deleteFigure(index) {
      if (index > -1) {
        this.graphics.splice(index, 1);
        this.readyForNewEvent("draw");
        this.drawBG();
        this.drawGraphics();
      }
    },
    selectedFigure(index) {
      if (index > -1) {
        this.activeIndex = index;
        this.currentStatus = status.UPDATING;
        this.drawBG();
        this.drawGraphics();
      }
    },
    updateImage() {
      this.image.style.transform = `scale(${this.scale},${this.scale}) translate(${this.imageXOffset}px,${this.imageYOffset}px) rotateZ(${this.degree}deg)`;
    },

    contrastChange(radio) {
      this.changePixelForContrast(radio);
    },
    brightnessChange(radio) {
      this.changePixelForBright(radio);
    },
    changePixelForContrast(radio) {
      if (!this.imageCtx) return;
      let imageData = this.imageCtx.getImageData(
        this.imagePosX,
        this.imagePosY,
        this.imageWidth * this.imageScale,
        this.imageHeight * this.imageScale
      );

      let data = imageData.data;
      let data0 = this.imagePixelData.data;
      // RGB = RGB + (RGB - avg) * Contrast / 255
      let avg_r = 0;
      let avg_g = 0;
      let avg_b = 0;
      for (var i = 0; i < data0.length; i += 4) {
        avg_r += data0[i];
        avg_g += data0[i + 1];
        avg_b += data0[i + 2];
      }
      avg_r /= data0.length / 4;
      avg_g /= data0.length / 4;
      avg_b /= data0.length / 4;
      for (var i = 0; i < data.length; i += 4) {
        data[i] = data0[i] + ((data0[i] - avg_r) * radio) / 50;
        if (data[i] > 255) {
          data[i] = 255;
        } else if (data[i] < 0) {
          data[i] = 0;
        }
        data[i + 1] = data0[i + 1] + ((data0[i + 1] - avg_g) * radio) / 50;
        if (data[i + 1] > 255) {
          data[i + 1] = 255;
        } else if (data[i + 1] < 0) {
          data[i + 1] = 0;
        }
        data[i + 2] = data0[i + 2] + ((data0[i + 2] - avg_b) * radio) / 50;
        if (data[i + 2] > 255) {
          data[i + 2] = 255;
        } else if (data[i + 2] < 0) {
          data[i + 2] = 0;
        }
      }
      this.imageCtx.putImageData(imageData, this.imagePosX, this.imagePosY);
    },
    changePixelForBright(radio) {
      if (!this.imageCtx) return;
      let imageData = this.imageCtx.getImageData(
        this.imagePosX,
        this.imagePosY,
        this.imageWidth * this.imageScale,
        this.imageHeight * this.imageScale
      );
      let data = imageData.data;
      let data0 = this.imagePixelData.data;
      let newRadio = parseInt((radio / 50) * 255);
      for (var i = 0; i < data.length; i += 4) {
        if (data0[i] + newRadio > 255) {
          data[i] = 255;
        } else if (data0[i] + newRadio < 0) {
          data[i] = 0;
        } else {
          data[i] = data0[i] + newRadio;
        }
        if (data0[i + 1] + newRadio > 255) {
          data[i + 1] = 255;
        } else if (data0[i + 1] + newRadio < 0) {
          data[i + 1] = 0;
        } else {
          data[i + 1] = data0[i + 1] + newRadio;
        }
        if (data0[i + 2] + newRadio > 255) {
          data[i + 2] = 255;
        } else if (data0[i + 2] + newRadio < 0) {
          data[i + 2] = 0;
        } else {
          data[i + 2] = data0[i + 2] + newRadio;
        }
      }
      this.imageCtx.putImageData(imageData, this.imagePosX, this.imagePosY);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./styles/index.scss";
.container{
  padding:0px!important;
}
</style>
